<template>
  <div class="app-container">
    <div class="all">
      <div class="left">
        <p>推广码</p>
        <div>
          <p><img :src="detail.qrcode" alt="" /></p>
          <p>邀请码</p>
          <p>邀链接：{{ shareUrl }}</p>
        </div>
      </div>
      <div class="right">
        <p>收入</p>
        <div>
          <div>
            <div>
              <img src="../../assets/images/2.png" alt="" />
            </div>
            <div>
              <p>{{ detail.untransfer_money }}</p>
              <p>待转账金额</p>
            </div>
          </div>
          <div>
            <div>
              <img src="../../assets/images/1.png" alt="" />
            </div>
            <div>
              <p>{{ detail.unreviewed_money }}</p>
              <p>待审核金额</p>
            </div>
          </div>
          <div>
            <div>
              <img src="../../assets/images/3.png" alt="" />
            </div>
            <div>
              <p>{{ detail.money }}</p>
              <p>可提现金额</p>
            </div>
          </div>
          <div>
            <div>
              <img src="../../assets/images/4.png" alt="" />
            </div>
            <div>
              <p>{{ detail.withdrawal_amount }}</p>
              <p>累计提现金额</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table-header-btn">
      <el-button
        type="success"
        plain
        size="small"
        class="lgm-add-btn"
        icon="el-icon-plus"
        @click="addList"

        >申请提现</el-button
      >
    </div>

    <div class="table">
      <el-table :data="dataList" border>
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column
          prop="money"
          label="申请金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="created_at"
          label="申请时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="style_name" label="收款方式" align="center">
          <template slot-scope="scope">
            <div>
              <p v-if="scope.row.type == 1">支付宝</p>
              <p v-if="scope.row.type == 2">微信</p>
              <p v-if="scope.row.type == 3">银行卡</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="style_name" label="收款信息" align="center">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.type == 1">
                <p>支付宝账号:{{ scope.row.alipay_account }}</p>
                <p>
                  <img
                    :src="scope.row.alipay_receipt_image"
                    style="width: 100px"
                    alt=""
                  />
                </p>
              </div>
              <div v-if="scope.row.type == 2">
                <p>微信账号:{{ scope.row.wechat_account }}</p>
                <p>
                  <img
                    :src="scope.row.wechat_receipt_image"
                    style="width: 100px"
                    alt=""
                  />
                </p>
              </div>
              <div v-if="scope.row.type == 3">
                <p>开户地址：{{ scope.row.bank_name }}</p>
                <p>银行卡：{{ scope.row.bank_card_number }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" align="center">
          <template slot-scope="scope">
            <div>
              <div>
                <div v-if="scope.row.status == 0">
                  <el-tag>待处理</el-tag>
                </div>
                <el-tag v-if="scope.row.status == 1" type="success"
                  >审核通过</el-tag
                >
                <el-tag v-if="scope.row.status == 2" type="danger"
                  >审核失败</el-tag
                >
                <el-tag v-if="scope.row.status ==3" type="success"
                  >转账成功</el-tag
                >
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="280">
          <template slot-scope="scope">
            <div class="flex">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="handleEdit(scope.row)"
              >
                <i class="el-icon-edit"></i> 备注
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="lgm-page-wrap">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="提现" :visible.sync="dialogVisible" center width="500px">
      <el-form
        :model="detailForm"
        ref="ruleForm"
        label-width="100px"
        class="detailForm"
      >
        <el-form-item label="提现类型" style="width: 100%">
          <el-radio v-model="detailForm.type" label="1"  :disabled="detailForm.id?true:false">支付宝</el-radio>
          <el-radio v-model="detailForm.type" label="2"  :disabled="detailForm.id?true:false">微信</el-radio>
          <el-radio v-model="detailForm.type" label="3"  :disabled="detailForm.id?true:false">银行卡</el-radio>
        </el-form-item>
        <el-form-item label="申请金额" prop="money" style="width: 100%">
          <el-input v-model="detailForm.money" :disabled="detailForm.id?true:false"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks" style="width: 100%">
          <el-input v-model="detailForm.remarks"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="lgm-reset-btn" @click="dialogVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="dialogConfirm('ruleForm')"
          class="lgm-search-btn"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { jiao_cash_drawstatic, my_withdrawal ,jiao_cash_draw} from "@/api/admin";
export default {
  name: "MineSalary",

  data() {
    return {
      total: 0,
      detailForm: {
        type: "1",
        money: "",
        remarks: "",
      },
      page: 1,
      page_size: 10,
      shareUrl: window.location.origin,
      detail: {},
      dataList: [],
      dialogVisible: false,
    };
  },
  mounted() {
    this.jiao_cash_drawstaticFn();
    this.my_withdrawalFn();
  },
  methods: {
    addList() {
      this.detailForm = {
        id: "",
        type: "1",
        money: "",
        remarks: "",
      
      };
      this.dialogVisible = true;
    },
    jiao_cash_drawstaticFn() {
      jiao_cash_drawstatic({}, "GET").then((e) => {
        this.detail = e.data;
      });
    },
    handleSizeChange(value) {
      this.page_size = value;
      this.my_withdrawalFn();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.my_withdrawalFn();
    },
    handleEdit(item) {
      item.type = item.type + "";
      this.detailForm =JSON.parse( JSON.stringify(item));
      this.dialogVisible = true;
    },
    dialogConfirm() {
      let obj = {};
      if (this.detailForm.id) {
        obj = {
          id: this.detailForm.id,
         ...this.detailForm,
        };
      } else {
        obj = this.detailForm;
      }
      jiao_cash_draw(
        obj,
        this.detailForm.id ? "PATCH" : "POST",
        this.detailForm.id
      ).then((e) => {
        this.page = 1;
        this.dialogVisible = false;
        this.detailForm = {
          type: "1",
          money: "",
          remarks: "",
        };
        this.my_withdrawalFn();
      });
    },
    my_withdrawalFn() {
      my_withdrawal(
        {
          page: this.page,
          page_size: this.page_size,
        },
        "GET"
      ).then((e) => {
        console.log(e.data.list);
        this.dataList = e.data.list;
        this.total = e.data.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.app-container {
  .all {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .left {
      width: 49%;
      background: #fff;
      > p:nth-child(1) {
        border-bottom: 1px solid #eee;
        padding: 20px;
      }
      > div:nth-child(2) {
        text-align: center;
        padding: 10px;
        img {
          width: 150px;
        }
        p {
          padding: 5px 0;
        }
      }
    }
    .right {
      width: 50%;
      background: #fff;
      > p:nth-child(1) {
        border-bottom: 1px solid #eee;
        padding: 20px;
      }
      > div:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        > div {
          width: 50%;
          display: flex;
          align-items: center;
          padding: 30px;
          padding-left: 15%;
          img {
            margin-right: 10px;
          }
          p:nth-child(1) {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}
</style>
